<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>添加计划任务</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="/static/layui/css/layui.css" />
    	<link rel="stylesheet" href="/static/ui/css/ui.css" />
    </head>
    <body>
        <form class="layui-form" action="" lay-filter="editform">
            <div class="mainBox">
                <div class="main-container">
                    <div class="main-container">
                        <div class="layui-form-item">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务路径</label>
                            <div class="layui-input-block">
                                <input type="text" name="handle" lay-verify="required" autocomplete="off" placeholder="请输入任务路径" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否开启</label>
                            <div class="layui-input-block">
                                <input type="radio" name="enable" value="0" title="关闭">
                                <input type="radio" name="enable" value="1" title="开启" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">立即执行</label>
                            <div class="layui-input-block">
                                <input type="radio" name="immediate" value="0" title="关闭">
                                <input type="radio" name="immediate" value="1" title="开启" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">执行次数</label>
                            <div class="layui-input-block">
                                <input type="radio" name="type" value="one" title="一次">
                                <input type="radio" name="type" value="all" title="多次" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务类型</label>
                            <div class="layui-input-block">
                                <input type="radio" name="runtype" lay-filter="runtype" value="0" title="间隔任务" checked>
                                <input type="radio" name="runtype" lay-filter="runtype" value="1" title="系统任务">
                            </div>
                        </div>
                        <div class="layui-form-item" id="time_task">
                            <label class="layui-form-label">间隔时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="interval" id="interval" value="" autocomplete="off" placeholder="请输入间隔时间" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <select name="intertype" id="intertype" lay-filter="intertype">
                                    <option value="">毫秒</option>
                                    <option value="s" selected>秒</option>
                                    <option value="m">分钟</option>
                                    <option value="h">小时</option>
                                    <option value="d">天</option>
                                    <option value="w">周</option>
                                    <option value="m">月</option>
                                    <option value="y">年</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item" id="sys_task" style="display:none">
                            <label class="layui-form-label">执行设置</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="cron" id="cron" value="0/10 * * * * ?">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="button-container">
                    <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="crons-save">
                        <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
                </div>
            </div>
        </form>
        <script src="../config.js"></script>
		<script src="/static/layui/layui.js"></script>
		<script src="/static/ui/ui.js"></script>
        <script>
            layui.use([
                'form', 'layer', 'cron', 'element'
            ], function () {
                let form = layui.form,
                    layer = layui.layer,
                    element = layui.element,
                    $ = layui.$,
                    cron = layui.cron,
                    id = _req('id');
                let initRunType = (type) => {
                    if(type == 1) {
                        $('#sys_task').show();
                        $('#time_task').hide();
                    }else{
                        $('#sys_task').hide();
                        $('#time_task').show();
                    }
                }
                if (id) {
                    //渲染
                    _get(layui, 'crons/editBefore?id=' + id, res => {
                        form.val('editform', res)
                        initRunType(res.runtype)
                    });
                }
                
                form.on('radio(runtype)', function(data){
                    initRunType(data.value)
                });
                cron.render({
                    elem: "#cron", // 绑定元素
                    btns: ['confirm'],
                    //run: "../static/json/run.json",  获取最近运行时间的接口
                    done: function (cronStr) { // 点击确定，触发，参数为 cron 表达式字符串
                        //console.log(cronStr);
                        $('#cron').val(cronStr)
                    }
                });
                //监听提交
                form.on('submit(crons-save)', function (data) {
                    data = data.field;
                    let postUrl;
                    if (id) {
                        postUrl = 'crons/edit';
                        data.id = id;
                    } else {
                        postUrl = 'crons/add';
                    }
                    if(data.runtype == 0) {
                        if(!data.interval || isNaN(data.interval) || data.interval < 1) {
                            layer.msg('请填写正确的间隔时间', {icon:2})
                            return false;
                        }
                    }else{
                        if(!data.cron || data.cron == '') {
                            layer.msg('请填写正确的执行脚本', {icon:2})
                            return false;
                        }
                    }
                    _post(layui, postUrl, data, res => {
                        //console.log(res)
                        parent
                            .layui
                            .table
                            .reload("crons-table");
                        parent
                            .layer
                            .close(parent.layer.getFrameIndex(window.name)); //关闭当前页

                    })

                    return false;
                });

            });
        </script>

    </body>
</html>